<template>
    <div class="main">
        <div class="card_box1">
            <div class="card_li" v-for="item in topList" @click="goDetial(item)">
                <img :src="'https://wx.zhengzhong.cn' + item.url2" v-if="item.url2">
                <img src="../../assets/index_banner1.png" v-else>
                <div class="description">
                    <p class="p_title">{{ item.appName }}</p>
                    <p class="p_content">
                        {{ item.remark }}</p>
                    <!-- <p
                        :class="{ 'p_content': item.remark != 'null', 'p_content1': item.remark == 'null' || item.remark == '' }">
                        {{ item.remark }}去去去去去去去去</p> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";


export default {
    props: {
        topList: {
            type: Array,
            default: false
        },
    },
    data() {
        return {
            list: [],
            // topList: [],
        }
    },
    mounted() {
        // this.getListApp()
    },
    methods: {
        getListApp() {
            httpService("/javaApi/getAllApp", "", "get").then((data) => {
                // console.log(data);
                this.list = data;
                this.topList = data.slice(0, 5)
                this.appTotal = data.length;
            });
        },

        goDetial(item) {
            if (item.background) {
                let routeData = this.$router.resolve({
                    path: item.background,
                });
                console.log(routeData);
                window.open(routeData.href, "_blank");
            } else {
                //这里post调用后端接口，后端接口负责跳转业务
                let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                params.append("returnUrl", item.url);
                httpService("/javaApi/doLogin", params, "post").then((data) => {
                    if (data.code == 200) {
                        window.open(data.object, "_blank");
                    } else {
                        ElMessage.error(data.message);
                    }
                });
            }
        },
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}



.main {}

.card_box1 {
    width: 75%;
    margin: 25px auto 0;
    display: flex;
    justify-content: space-between;
}

.card_li {
    width: 19%;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05),
        -1px -1px 10px rgba(0, 0, 0, 0.05),
        -1px 1px 10px rgba(0, 0, 0, 0.05),
        1px -1px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.card_li:hover img {
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

.card_li img {
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.description {
    margin: 15px 0 15px 20px;
    margin: 4% 0 0 7%;
    padding-bottom: 15px;
    padding-bottom: 0.8vw;
}

.description .p_title {
    color: #000;
    font-size: 16px;
    font-size: max(14px, min(1.2vw, 16px));
    font-weight: bold;
}

.description .p_content {
    color: #999;
    font-size: 12px;
    font-size: max(11px, min(0.85vw, 12px));
    margin-top: 8px;
    margin-top: 0.42vw;
}

.description .p_content1 {
    color: #999;
    font-size: 12px;
    margin-top: 8px;
    visibility: hidden;
}

@media only screen and (min-width: 1024px) {}

@media only screen and (max-width: 1024px) {}
</style>